<template>
	<view class="indexContainer">
		<view class="headerBox">
			<view class="flex searchBox" @click="jumpSearchPage()">
				<image src="../../static/images/searchIcon.png" class="searchIcon"></image>
				<input type="text" disabled="disabled" placeholder="请输入搜索关键字" class="inputBox"/>
			</view>
		</view>
		<!--  #ifdef MP-WEIXIN -->
			<view class="yuyueBox" style="margin-top: -154px;">
				<view class="yuyueHeaderBox">
					<view class="yuyueHeader1 flex">
						<view class="flex titleBox">
							<image src="../../static/images/shareIcon.png" class="shareIcon"></image>
							<view>共享空间</view>
						</view>
						<view class="moreBox flex" @click="jumpMorePage(0)">
							<view>更 多</view>
							<image src="../../static/images/moreIcon.png" class="moreIcon"></image>
						</view>
					</view>
					<view class="shareTips">{{shareInfoTips}}</view>
				</view>
				
				<block v-if="shareSpaceList.length > 0">
					<view class="yuyueItem" v-for="item,index in shareSpaceList" :key="index" @click="jumpPage(item)">
						<view class="yuyueTxt"><!-- {{item.laboratoryNum}} -->{{item.laboratoryName}}</view>
						<view class="yuyueSubTxt txtOverFlow2" :style="{'line-height': item.laboratoryName.length>10 ? '26rpx':'54rpx'}">{{item.minPersonCount}}-{{item.maxPersonCount}}人</view>
						<view class="yuyueSubTxt txtOverFlow2 red"  :style="{'line-height': temp.laboratoryName.length>10 ? '26rpx':'54rpx'}">
							{{item.isApply==0?'待申请':item.relState==0?'待审核':item.relState==1?'可预约':'审核不通过'}}
						</view> 
					</view>
				</block>
				<view v-else class="noDataTxt">暂无数据</view>
			</view>
		<!--  #endif -->
		
		<!--  #ifdef MP-WEIXIN -->
		<view class="yuyueBox" v-if="classroomList.length > 0" v-for="item in classroomList">
		<!--  #endif -->
		<!--  #ifdef H5 -->
		<view class="yuyueBox" v-for="item,index in classroomList" :style="{'margin-top': index == 0 ? '-154px' : '20rpx'}" v-if="classroomList.length > 0">
		<!--  #endif -->
				<view class="yuyueHeader flex">
					<view class="flex titleBox">
						<image src="../../static/images/classifyIcon.png" class="shareIcon"></image>
						<view>{{item.classifyName}}</view>
					</view>
					<view class="moreBox flex" @click="jumpMorePage(1,item.typeOne)">
						<view>更 多</view>
						<image src="../../static/images/moreIcon.png" class="moreIcon"></image>
					</view>
				</view>
				<view class="yuyueItem" v-for="temp,jdx in item.list" :key="jdx" @click="jumpPage(temp)">
					<view class="yuyueTxt txtOverFlow"><!-- {{temp.laboratoryNum}} -->{{temp.laboratoryName}}</view>
					<view class="yuyueSubTxt txtOverFlow2" :style="{'line-height': temp.laboratoryName.length>10 ? '26rpx':'54rpx'}">
						<!-- {{temp.laboratoryName}} -->
						可容纳{{temp.minPersonCount}}-{{temp.maxPersonCount}}人<br/>
						{{temp.laboratoryExplain.substring(0,12)}}<br/>
						
					</view> 
					<view class="yuyueSubTxt txtOverFlow2 red"  :style="{'line-height': temp.laboratoryName.length>10 ? '26rpx':'54rpx'}">
						{{temp.isApply==0 && !ignoreApplayStatus?'待申请':temp.relState==0?'待审核':temp.relState==1?'可预约':'审核不通过'}}
					</view> 
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareSpaceList:[],
				classroomList:[],
        ignoreApplayStatus: false,
				shareInfoTips:'' //共享空间提示文字
			}
		},
		onLoad(options) {
			this.getInfoTips('SYS004');//共享空间预约文字说明 channelId=hnsd appCode=SYS004
			
			// #ifdef H5
				// setTimeout(()=> {
				// 	console.log(2323)
				// 	uni.getStorage({
				// 		key: 'orderId',
				// 		success: function (res) {
				// 			console.log("orderId11: ",res);
				// 			uni.navigateTo({
				// 				url: '/pages/classroom/classroom?orderId='+res.data,
				// 			});	
				// 		}
				// 	})	
				// },500)
			// #endif
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.searchClassroomListSync(1,12);//	是否共享空间 0:不共享; 1:共享
			// #endif
			// #ifdef H5
			this.searchClassroomListSync(1,12);//	是否共享空间 0:不共享; 1:共享
			// #endif
			this.classroomList = [];
			this.getClassifyId();
			this.indexShowModal();
      this.getIngoreApplyStatus();
		},
		onPullDownRefresh() {
			
			// #ifdef MP-WEIXIN
			this.searchClassroomListSync(1,12);//	是否共享空间 0:不共享; 1:共享
			// #endif
			// #ifdef H5
			this.searchClassroomListSync(1,12);//	是否共享空间 0:不共享; 1:共享
			// #endif
			this.classroomList = [];
			this.getClassifyId();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			indexShowModal(closetips = 0) {
				console.log("2222222")
				// alert("1111111111111111111111111")
			
				this.$utils.requestFun('/auth/auth/api/channelConfigApi', {
					channelId: getApp().globalData.channelId,
					appCode: "SYS029"
				}, 'GET').then(res => {
					let _info = res?.data?.data?.info||'';
					if(_info != ''&& _info != '0'){
						setTimeout(function() {
							if (closetips == 0) { //代表第一次调用数据
								uni.showModal({
									title: '通知',
									showCancel:false,
									content: _info,
									success: function(res) {
										
									}
								});
							}
						}, 1000);
					}

				})
			
			},
      getIngoreApplyStatus() {
        this.$utils.requestFun('/auth/auth/api/channelConfigApi', {
					channelId: getApp().globalData.channelId,
					appCode: "SYS034"
				}, 'GET').then(res => {
					let _info = res?.data?.data?.info||'';
					if(_info != ''&& _info == '0'){
						this.ignoreApplayStatus = true;
					}

				})
      },
			jumpMorePage(flag,id) {
				uni.navigateTo({
					url: '/pages/classroomList/classroomList?flag='+flag+'&typeOneId='+id+'&ignoreApplayStatus='+ (this.ignoreApplayStatus ? 1 : 0),
				});
			},
			jumpSearchPage() {
				uni.navigateTo({
					url: '/pages/search/search',
				});
			},
			jumpPage(temp) {
				let id = temp.laboratoryId??''
				let merchantId = temp.merchantId??''
				if(0 == temp.isApply && !this.ignoreApplayStatus){
					uni.showToast({
						title: '您还未申请教室！',
						icon: 'none'
					})
					return
				}
				if(0 == temp.relState){
					uni.showToast({
						title: '您申请的教室未审核！',
						icon: 'none'
					})
					return
				}
				if(2 == temp.relState){
					uni.showToast({
						title: '您申请的教室审核不通过！',
						icon: 'none'
					})
					return
				}
				
				
				this.$utils.requestFun('/base/merchant/api/getClientMerchantNoticeApi', {
					merchantId: merchantId
				}, 'GET').then(res => {
					console.log("inde_res===",res)
					let _isHas = res?.data?.data?.isHas||0;
					if(_isHas == 0){
						uni.removeStorageSync('orderId');
						uni.navigateTo({
							url: '/pages/oneclassroom/oneclassroom?laboratoryId='+id,
							// url: '/pages/classroom/classroom?laboratoryId='+id,
						});
					}else{
						let _notice = res?.data?.data?.notice||{};
						
						uni.showModal({
							title: _notice.noticeTitle,
							showCancel:false,
							content: _notice.noticeContent,
							success: function(res) {
								uni.removeStorageSync('orderId');
								uni.navigateTo({
									url: '/pages/classroom/classroom?laboratoryId='+id,
								});
							}
						});
					}
							
				})
			},
			getInfoTips(appCode) {
				let _this = this;
				this.$utils.requestFun('/auth/auth/api/channelConfigApi',{
					channelId: getApp().globalData.channelId,
					appCode: appCode
				},'GET').then(res=> {
					_this.shareInfoTips = res.data.data.info;
				})
			},
			//获取分类Id
			getClassifyId() {
				let _this = this;
				this.$utils.requestFun('/stadium/stadium/api/getRoomTypeOneEnableApi?routh=curriculum',{
					channelId: getApp().globalData.channelId,
					token: getApp().globalData.token,
				},'GET').then(res=> {
					if(res.data.data && res.data.data.length > 0) {
						for(let i = 0;i<res.data.data.length;i++) {
							  _this.searchClassroomListSync(0,12,res.data.data[i].sportsInfoId,res.data.data[i].sportsName,res.data.data[i].sorting); 
						}
					}
				})
			},
			
			sortClassRoomByType(field){
				return function(a,b){
					return a[field]-b[field];
				}
			},
			
			//isShare是否共享空间 0:不共享; 1:共享
			searchClassroomListSync(isShare,limit=12,typeOne='',classifyName='',sorting=0) {
				
				let _this = this;
				// ,
					// isShare: isShare
				let params = {
					channelId: getApp().globalData.channelId,
					token: getApp().globalData.token,
					page: 1,
					roomState: 1,//教室是否启用：0：否1：是
					limit: limit
				}
				if(isShare != 1) {
					params.typeOne = typeOne;
				}
				uni.request({
					// 请求路径
					url: getApp().globalData.serverUrl+'/stadium/stadium/api/getH5ClassroomListApi',
					// 请求参数code
					data: params,
					method: 'GET',
					success(res){
						if(isShare == 1) {
							_this.shareSpaceList = res.data.data.data;
						}else {
							let dataList = res.data.data.data ? res.data.data.data : [];
							let classroomObj = {
								classifyName: classifyName,
								typeOne: typeOne,
								sorting: sorting,
								list: dataList
							}
							_this.classroomList.push(classroomObj);
							_this.classroomList.sort(_this.sortClassRoomByType("sorting"))
							
							console.log(dataList);
						}
					}
				})
			}
		}
	}
</script>

<style>
	.indexContainer {
		width: 100%;
		height: 100%;
		background: #F6F6F6;
		padding-bottom: 20rpx;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.txtOverFlow2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.flex {
		display: flex;
	}
	
	.noDataTxt {
		color: #999999;
		text-align: center;
		margin: 100rpx 0;
		line-height: 200rpx;
	}
	.headerBox {
		width: 100%;
		height: 400rpx;
		padding-top: 47rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/indexHeadBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.searchBox {
		margin: 0 24rpx;
		width: 94%;
		background: #FFFFFF;
		height: 70rpx;
		border-radius: 35rpx;
		box-shadow: 0px 10px 20px 0px rgba(153, 153, 153, 0.1);
	}
	.searchIcon {
		width: 30rpx;
		height: 30rpx;
		margin: 22rpx 29rpx;
	}
	.inputBox {
		color: #999999;
		font-size: 30rpx;
		margin-top: 14rpx;
	}
	.yuyueBox {
		width: 94%;
		margin: 20rpx 24rpx;
		display: flow-root;
		min-height: 279rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.yuyueHeaderBox {
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 20rpx;
	}
	.yuyueHeader1 {
		height: 98rpx;
		line-height: 98rpx;
		/* margin-bottom: 20rpx; */
	}
	.yuyueHeader {
		height: 98rpx;
		line-height: 98rpx;
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 20rpx;
		clear: both;
	}
	.titleBox {
		color: #222222;
		font-size: 32rpx;
		font-weight: bold;
		width: 81%;
		text-align: left;
	}
	.shareIcon {
		width: 32rpx;
		height: 32rpx;
		margin: 34rpx 14rpx 0rpx 19rpx;
	}
	.moreBox {
		width: 92rpx;
		height: 50rpx;
		border: 1px solid #19AD78;
		border-radius: 25px;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #19AD78;
		margin-top: 20rpx;
		padding-left: 24rpx;
	}
	.moreIcon {
		width: 14rpx;
		height: 14rpx;
		margin-left: 4rpx;
		margin-top: 20rpx;
	}
	.yuyueItem {
		/* width: 202rpx; */
		width: 45%;
		height: 240rpx;
		background: #F6F6F6;
		border: 1px solid #EEEEEE;
		border-radius: 20rpx;
		float: left;
		margin-left: 22rpx;
		margin-bottom:20rpx;
		text-align: center;
	}
	.yuyueTxt {
		font-size: 25rpx;
		font-weight: bold;
		color: #222222;
		line-height: 54rpx;
		margin-top: 15rpx;
	}
	.yuyueSubTxt {
		font-size: 24rpx;
		color: #666666;
		line-height: 54rpx;
	}
	.shareTips {
		color: #999999;
		font-size: 24rpx;
		line-height: 40rpx;
		width: 94%;
		padding: 0 24rpx;
		margin-top: -20rpx;
	}
	.red {
		color: red;
	}
</style>
